<template>
  <blogHeader></blogHeader>

  <!-- 主内容区域 -->
  <main class="container main_min_height  max-w-[1200px] mx-auto p-4">
    <div class="grid grid-cols-10 gap-8">

      <!-- 左边栏 -->
      <div class="sm:col-span-7 col-span-10 mb-3 bg-white rounded-lg">
        <!-- 标签article列表 -->
        <div class="pl-4 mt-6 rounded-lg ">
          <h1 class="blog-font-cute text-2xl flex items-center font-semibold text-gray-800 dark:text-white">
            <!-- 文件夹图标 -->
            <svg class="inline w-4 h-4 mr-2 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
              fill="none" viewBox="0 0 21 18">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M2.539 17h12.476l4-9H5m-2.461 9a1 1 0 0 1-.914-1.406L5 8m-2.461 9H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.443a1 1 0 0 1 .8.4l2.7 3.6H16a1 1 0 0 1 1 1v2H5" />
            </svg>
            当前标签: {{ tagName }}
          </h1>
          <div v-loading="articleLoading">
            <ol v-if="articles.length !== 0"
              class="mt-3 pr-4 divide-y divider-gray-200 dark:divide-gray-700 min-h-[300px]">
              <li v-for="article in articles"
                class="transition-all rounded-lg duration-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                <a @click="goArticleDetail(article.id)" class="items-center block p-3 sm:flex ">
                  <div class="w-24 h-12 mb-3 mr-3 rounded-lg sm:mb-0 overflow-hidden">
                    <img class="rounded-lg transition-all duration-300 hover:scale-110" :src="article.cover" />
                  </div>
                  <div class="text-gray-600 dark:text-gray-400">
                    <h2 class="text-base font-normal text-gray-900">
                      {{ article.title }}
                    </h2>
                    <span class="inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400">
                      <svg class="inline w-2.5 h-2.5 mr-2 text-gray-400 dark:text-white" aria-hidden="true"
                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M5 1v3m5-3v3m5-3v3M1 7h18M5 11h10M2 3h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z" />
                      </svg>
                      {{ article.createDate }}
                    </span>
                  </div>
                </a>
              </li>
            </ol>
            <!-- 空白article -->
            <div v-else>
              <div class="w-1/2 mb-4 mx-auto">
                <img class="" src="@/assets/img/blank_folder.png" />
                <p class="blog-font-cute text-center">该标签下还没有article嗷</p>
              </div>
            </div>
          </div>

        </div>


        <!-- 分页 -->
        <nav v-if="articles.length >= 5" aria-label="Page navigation example" class="mt-10 flex justify-center">
          <ul class="flex items-center -space-x-px h-10 text-base">
            <!-- 上一页 -->
            <li>
              <a @click="getArticlesByTag(current - 1)"
                class="flex items-center justify-center px-4 h-10 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">

                <span class="sr-only">上一页</span>
                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                  viewBox="0 0 6 10">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M5 1 1 5l4 4" />
                </svg>
              </a>
            </li>
            <!-- 页码 -->
            <li>
              <a v-for="(pageNo, index) in pages" @click="getArticlesByTag(current)"
                class="text-blue-600  bg-blue-50 border-blue-300 hover:bg-blue-100 hover:text-blue-700 flex items-center justify-center px-4 h-10 leading-tight border  dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                {{ index + 1 }}
              </a>
            </li>
            <!-- 下一页 -->
            <li>
              <a @click="getArticlesByTag(current + 1)"
                class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                <span class="sr-only">下一页</span>
                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                  viewBox="0 0 6 10">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="m1 9 4-4-4-4" />
                </svg>
              </a>
            </li>
          </ul>
        </nav>
      </div>




      <!-- 右边侧边栏 -->
      <aside class="col-span-3 hidden sm:block">
        <!-- 博主信息 -->
        <AuthorInfoCard></AuthorInfoCard>
        <!-- 标签 -->
        <TagCloudCard></TagCloudCard>

      </aside>
    </div>

  </main>
  <div class="hidden md:block sticky bottom-0 right-0 w-full">
        <div class="absolute right-0 bottom-0">
            <live2d></live2d>
        </div>
    </div>
  <indexFooter></indexFooter>


</template>

<script setup>
import { getArticlesPageByTag } from '@/api/frontend/tag';
import AuthorInfoCard from '@/composition/frontend/component/AuthorInfoCard.vue';
import blogHeader from '@/composition/frontend/component/Header.vue'
import TagCloudCard from '@/composition/frontend/component/TagCloudCard.vue';
import indexFooter from '@/composition/frontend/component/indexFooter.vue';
import live2d from '@/components/live2d.vue';
import { showMessage } from '@/composables/utils';
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import router from '@/router';






//========================路由动态渲染标签标题======================
const route = useRoute()
const tagName = ref(route.query.name)
const tagId = ref(route.query.id)
// 监听路由
watch(route, (newRoute, oldRoute) => {
  tagName.value = newRoute.query.name
  tagId.value = newRoute.query.id
})
//==================article渲染===============
const articleLoading = ref(false)
const articles = ref([])
const size = ref(5)  //每页article数
const total = ref(0)  //article总数
const current = ref(1)  //当前页码
const pages = ref(0)  //总共多少页
const getArticlesByTag = (currentNo) => {
  //调用api
  // 上下页是否能点击判断，当要跳转上一页且页码小于 1 时，则不允许跳转；当要跳转下一页且页码大于总页数时，则不允许跳转
  if (currentNo < 1 || (pages.value > 0 && currentNo > pages.value)) {
    return
  }
  getArticlesPageByTag({ current: currentNo, size: size.value, id: tagId.value }).then(res => {
    articleLoading.value = true
    if (!res.success) {
      showMessage('获取文章失败', 'error')
      return
    }
    articles.value = res.data || []
    current.value = res.current
    size.value = res.size
    total.value = res.total
    pages.value = res.pages
  }).then(() => {   //随机图片
    for (const item of articles.value) {
      if (item.cover === '') {
        fetch("https://api.maho.cc/random-img/pc.php").then(res => {
          if (!res.ok) {
            showMessage('获取随机图片失败', 'error')
            return
          }
          item.cover = res.url
        }).catch(() => {
          showMessage('获取随机图片失败', 'error')
        })
      }
    }
  }).finally(() => {
    articleLoading.value = false
  })
}
getArticlesByTag(current.value)

const goArticleDetail = (id) => {
  router.push('/article/' + id)
}

</script>

<style scoped></style>